<!--
 * @Description: 饼图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-08-14 15:14:43
 * @LastEditTime: 2020-09-08 14:28:17
-->
<template>
    <ScreenContainer class="pieCharts demo">
        <!-- 标准饼图 -->
        <borderBox7 class="box">
            <pieChart :apiMethod="getData"
                      apiParam="getPie1"
                      title="标准饼图"
                      labelFmt="{b}: {c} ({d}%)"
                      label />
        </borderBox7>
        <!-- 测试饼图各种配置项 -->
        <borderBox8 class="box">
            <pieChart :apiMethod="getData"
                      apiParam="getPie1"
                      title="测试饼图各种配置项"
                      :colors="['#e87c25','#e6b600','#0098d9','#2b821d','#005eaa','#339ca8']"
                      radius="55%"
                      :center="['45%','50%']"
                      tooltipFmt="{a}<br/>{b} : {c} ({d}%)"
                      :legendOptions="{x2:'10%',y:'center',orient:'vertical'}"
                      :labelInsideCats="['姓名数量']"
                      label />
        </borderBox8>
        <!-- 标准环饼图 -->
        <borderBox9 class="box">
            <pieChart :apiMethod="getData"
                      apiParam="getPie1"
                      @getChartData="getChartDataTotal"
                      title="标准环饼图"
                      labelFmt="{b}: {c} ({d}%)"
                      :radius="['42%','62%']"
                      :titleDIY="titleDIY"
                      label />
        </borderBox9>
        <!-- 标准嵌套饼图(默认选中营销广告) -->
        <borderBox10 class="box">
            <pieChart :apiMethod="getData"
                      apiParam="getPie2"
                      title="标准嵌套饼图(默认选中营销广告)"
                      :labelFmt="[
                        '{b}',
                        '{b}: {c} ({d}%)'
                      ]"
                      :radius="[
                        [0,'30%'],
                        ['45%','60%']
                      ]"
                      :selectedCats="['营销广告']"
                      :legendOptions="{x:0,y:'center',orient:'vertical'}"
                      label />
        </borderBox10>
        <!-- 半径模式的南丁格尔玫瑰图 -->
        <borderBox11 class="box"
                     title="半径模式的南丁格尔玫瑰图"
                     :titleWidth="300">
            <pieChart :apiMethod="getData"
                      apiParam="getPie1"
                      labelFmt="{b}: {c} ({d}%)"
                      roseType="radius"
                      label />
        </borderBox11>
        <!-- 面积模式的南丁格尔玫瑰图 -->
        <borderBox12 class="box">
            <pieChart :apiMethod="getData"
                      apiParam="getPie1"
                      title="面积模式的南丁格尔玫瑰图"
                      labelFmt="{b}: {c} ({d}%)"
                      roseType="area"
                      label />
        </borderBox12>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import pieChart from '@/components/charts/default/pieChart.vue' //饼图
import borderBox7 from '@/components/borderBox/borderBox7.vue' //边框7
import borderBox8 from '@/components/borderBox/borderBox8.vue' //边框8
import borderBox9 from '@/components/borderBox/borderBox9.vue' //边框9
import borderBox10 from '@/components/borderBox/borderBox10.vue' //边框10
import borderBox11 from '@/components/borderBox/borderBox11.vue' //边框11
import borderBox12 from '@/components/borderBox/borderBox12.vue' //边框12
export default {
    name: 'pieCharts',
    components: {
        pieChart,
        ScreenContainer,
        borderBox7,
        borderBox8,
        borderBox9,
        borderBox10,
        borderBox11,
        borderBox12,
    },
    data() {
        return {
            getData, //api方法
            total: 0,
        }
    },
    computed: {
        titleDIY() {
            return {
                //环饼图自定义标题配置项
                text: this.total,
                subtext: '总计',
                textStyle: {
                    color: '#f2f2f2',
                    fontSize: 25,
                },
                subtextStyle: {
                    fontSize: 15,
                    color: ['#ff9d19'],
                },
                x: 'center',
                y: '45%',
            }
        },
    },
    methods: {
        getChartDataTotal(series) {
            series.forEach((item) => {
                this.total += item.data
                    .map((item) => item.value)
                    .reduce((a, b) => a + b) //求和
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 33.3333%;
        height: 50%;
    }
}
</style>
